<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        position: absolute;
        width: 10px;
        height: 10px;
        /* background-color: red; */
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <!-- <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div> -->
    <div>⭐</div>
    <div>⭐</div>
    <div>⭐</div>
    <div>⭐</div>
    <div>⭐</div>
    <div>⭐</div>
    <div>⭐</div>
    <div>⭐</div>
    <div>⭐</div>
    <div>⭐</div>
  </body>
  <script>
    var aDiv = document.querySelectorAll("div");
    window.onmousemove = function (ev) {
      ev.preventDefault();
      var x = ev.clientX;
      var y = ev.clientY;
      // console.log(x, y);
      //将鼠标所在的坐标赋值给最后一个div元素
      // aDiv[aDiv.length - 1].style.left =
      //   x - aDiv[aDiv.length - 1].offsetWidth / 2 + "px";
      // aDiv[aDiv.length - 1].style.top =
      //   y - aDiv[aDiv.length - 1].offsetHeight / 2 + "px";

      //将鼠标所在的坐标赋值给第一个div元素
      aDiv[0].style.left = x - aDiv[0].offsetWidth / 2 + "px";
      aDiv[0].style.top = y - aDiv[0].offsetHeight / 2 + "px";

      //从最后一个元素进行赋值，
      for (var i = aDiv.length - 1; i > 0; i--) {
        aDiv[i].style.left = aDiv[i - 1].style.left;
        aDiv[i].style.top = aDiv[i - 1].style.top;
      }
    };
  </script>
</html>
